<template>
  <div class="mb-4">
    <el-row>
      <el-col :span="6">
        <research3 @output="onput" />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" plain @click="onClick">搜索</el-button>
      </el-col>
      <el-col :span="3">
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
    </el-row>
  </div>
  <br />
  <el-col> <el-button  type="danger":icon="Delete" @click="deleteUser">删      除</el-button></el-col>
  <br />
  <el-table :data="tableData" border style="width: 100%" @selection-change="selectDeleteUser">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="bookID" label="预定ID" width="80" />
    <el-table-column prop="bookUser" label="预定用户" width="100" />
    <el-table-column prop="field" label="场馆ID" width="80" />
    <el-table-column prop="time" label="时间" width="200" />
    <el-table-column prop="createDate" label="创建时间" width="200" />

  </el-table>
</template>

<script lang="ts">
import research3 from './research3.vue';
export default {
  components: {
    research3,
  },
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const input = ref(0);
const tableData = ref([]);
const selectedRows = ref([]);

const onput = (e) => {
  console.log(e);
  input.value = e;
};

const onClick = () => {
  try {
    axios.get('http://localhost:9001/Book/searchBook', {
      params: { info: input.value },
    }).then((response) => {
      console.log(input);
      tableData.value = response.data;
    });
    }catch (error) {
    console.error('连接失败：', error.message);
  }
};

const reSet = () => {
  //input.value = '';
  try {
    axios.get('http://localhost:9001/Book/getAllBook', {
      params: { info: input.value },
    }).then((response) => {
      console.log(input);
      tableData.value = response.data;
    });
  } catch (error) {
    console.error('连接失败：', error.message);
  }
};

import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'


onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:9001/Book/getAllBook');
    tableData.value = response.data;
  } catch (error) {
    console.error('连接失败：', error.message);
  }
});

const selectDeleteUser=(select) => {
  console.log(select);
  selectedRows.value=select;
}
function deleteUser(){
  console.log(selectedRows.value);
  axios.post('http://localhost:9001/Book/deleteBook',selectedRows.value).then(response => {
    alert("删除成功!")
  })
}

</script>
